<html>
    <head>
        <title>Heaven Job</title>
        <link rel="stylesheet" type="text/css" href="<?php echo css_url().'user_group3/header.css'?>">
        <link rel="stylesheet" type="text/css" href="<?php echo css_url().'notification/notification.css'?>">
        <link rel="stylesheet" type="text/css" href="<?php echo css_url().'page_sections.css'?>">
        <script src="<?php echo js_url()."jquery.min.js"?>"> </script>
        
        <script>
            var notification;
            $(document).ready(function(){
                $("ul.user-panel-container").css('visibility','hidden');
                    $(".user-header-container").on('click',function(){
                        $("ul.user-panel-container").css('visibility','hidden');
                        $("#notification-holder-panel").empty();
                    });
                
                $("a#user-account-link").on('click',function(e){
                    e.stopPropagation();
                    var val = $("ul.user-panel-container").css('visibility');
                    if(val == 'hidden'){
                        $("ul.user-panel-container").css('visibility','visible');
                    }
                    else{
                        $("ul.user-panel-container").css('visibility','hidden');
                    }
                }); 

                $(".button-login").on('click',function(){
                    $.get("<?php echo site_url().'/pages/login_form' ?>", function(data){
                        $("section#body").empty();
                        $("section#body").html(data);
                    });
                });

                $(".button-signup").on('click',function(){
                    $.get("<?php echo site_url().'/pages/signup_form' ?>", function(data){
                        $("section#body").empty();
                        $("section#body").html(data);
                    });
                });
                
                $("#notification-trigger").on('click',function(e){
                    e.stopPropagation();
                    $.get("<?php echo site_url().'/user_group3/notification/get_notification' ?>", function(data){
                        $("#notification-holder-panel").empty();
                        $("#notification-holder-panel").html(data);
                    });
                });


                IntervalFunctions = function(){
                    Noti_Handler();
                }


                function Noti_Handler(){

                    $.ajax({
                        url : '<?php echo site_url().'/user_group3/notification/num_new_not'?>',
                        type: 'post',
                        success: function(data){
                            $('#new-notification-number').text(data);
                            if(data > 0){
                                $('#notification-trigger').attr('light','on');
                                $('#new-notification-number').css('display','block');
                            }
                            else{
                                $('#notification-trigger').attr('light','off');
                                $('#new-notification-number').css('display','none');
                            }
                        }
                    })
                }
                IntervalFunctions();
                setInterval(IntervalFunctions,10000);
        });
        </script>
    </head>
    
    <body>
        <section class="user-header-container">
            <div class="user-header-content" >
                <div class="header-logo-image">
                    <image src="http://i.imgur.com/ADDNadn.png"/>
                </div>
                
                <?php if($UserInfo){?>
                <div class="user-header-profile">
                    <div class="user-header-profile-information">
                        <a id="user-account-link" href="#profile"><?php echo $UserInfo['UserEmail']?></a>
                    </div>
                    <a class='user-avatar' href="#">
                        <image id="user-avatar" src="<?php echo user_avatar_link()?>" style="float:right;width:50px; height:50px"/>
                    </a>
                    <ul class="user-panel-container" style="visibility: hidden;">
                        <li class="user-panel-element-container"><a href="<?php echo site_url().'/user_group3/account'?>" class="user-panel-element">User Page</a></li>
                        <li class="user-panel-element-container"><a href="<?php echo site_url().'/signout'?>" class="user-panel-element">Logout</a></li>
                    </ul>
                    
                    <div class="notification-container">
                        <div class="notification-icons-container">
                            <ul>
                                <li>
                                    <span id="new-notification-number" class="notired"></span>
                                    <a id="notification-trigger" class="showmesgreq spritimg" light="off" title="Click to View Notifications">ws</a>
                                </li>
                            </ul>
                        </div>
                        <div id="notification-holder-panel" class="pop-up-panel" style="z-index: 1">

                        </div>
                    </div>
                </div>
                

                <?php }  else { ?>
                <div class="user-header-profile-nolog">
                    <a class="button-login" href='#'>Login</a>
                    <a class="button-signup" href='#'>Sign Up</a>
                    
                </div>
                 <?php } ?>
                <div class="header-nav-bar-container" >
                    <ul class="header-nav-bar">
                        <li><a href="<?php echo site_url();?>" class="header-nav-header">Home</a></li>
                        <li><a href="<?php echo site_url().'/user_group3/jobs'?>" class="header-nav-header">Find Job</a></li>
                        <li><a href="<?php echo site_url()."/user_group3/manage_jobs"?>" class="header-nav-header">Manage Jobs</a></li>
                        <li><a href="/About" class="header-nav-header">About Us</a></li>
                    </ul>
                </div>
            </div>
        </section>
